<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>bootstrapt图片上传实例</title>
    </head>
    <body>
        <div class="container kv-main">
            
            <br>
            <form enctype="multipart/form-data">
                
                <div class="form-group">
                    <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1">
                </div>
                
            </form>
        </div>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/fileinput.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>

	<script>
        $("#file-1").fileinput({
            uploadUrl: 'http://localhost/file/doFileUp',
            allowedFileExtensions : ['jpg', 'png','gif'],
            overwriteInitial: false,
            maxFileSize: 7000,
            maxFilesNum: 10,
            //allowedFileTypes: ['image', 'video', 'flash'],
            slugCallback: function(filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        }).on("filebatchselected", function (event, data) {//选择即上传
            if (data.length == 0) {
                return;
            }
        }).on('fileuploaded', function (event, data) {//异步上传成功结果处理
            alert(data.response.url)
            console.log(event, data);
        }).on('fileerror', function (event, data, msg) {//异步上传失败结果处理
            console.log(event, data, msg);
        }).on('fileuploaderror', function (event, data, msg) {//异步上传失败结果处理
            console.log(event, data, msg);
        }).on('filebatchuploadsuccess', function(event,data,previewId,index) {//同步上传回调
            console.log(event, data);
        });
	</script>

    </body>
</html>